<template>
    <div>
        <button @click="changeName">changeName</button>
        <button @click="changeInfo(name)">修改Info</button>
    </div>
</template>

<script>
import { ref, unref, shallowRef, triggerRef } from "vue";
export default {
    setup() {
        const name = ref("why")
        const info = shallowRef({ name: "why1" })
        const changeName = (name) => {
            console.log(unref(name));   //这是val = isRef(val)?val.value:val的语法糖函数
            if (isRef(name)) {
                name.value = "lion"
            } else {
                name = "lion"
            }
            myname = "Leo"
        }
        const changeInfo = () => {
            info.value.name = "james";  //直接修改浅层的ref的深层对象是不刷新的
            triggerRef(info);       //触发刷新
        }
        return {
            name,
            changeName
        }
    }
}
</script>

<style lang="scss" scoped>
</style>